<template>
    <view class="charge">
        <!-- Header Start -->
        <view class="charge-content">
            <view class="lighter text-lg">充值金额</view>
            <view class="input">
                <!-- 充值输入 -->
                <input type="text" @input="handleCheckMoney" v-model="money" placeholder="0.00" />
            </view>
            <view class="mt-[25rpx] text-xs text-muted">
                当前可用余额<text class="primary"> ¥{{ availableMoney }}</text>
            </view>
        </view>
        <!-- Header End -->

        <!-- Main Start -->
        <!-- 充值按钮 -->
        <view class="charge-btn">
            <u-button
                @click="handleCharge()"
                :ripple="true"
                shape="circle"
                :hair-line="false"
                type="primary"
                >立即充值</u-button
            >
        </view>

        <!-- Footer Start -->
        <!-- 充值记录 -->
        <view
            class="record text-muted text-sm flex justify-center"
            @click="goPage('/bundle/pages/user_charge_record/index')"
        >
            充值记录</view
        >
        <!-- Footer End -->
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getClient } from '@/utils/client'
import { PayEnum } from '@/utils/enum'
import { apiUserWallet, apiChargeTemplateLists, apiChargeMoney } from '@/api/user'

/** Data Start **/
const money = ref<string>('')
const availableMoney = ref<string>('0.00')
const chargeTemplate = ref([])
const showPopup = ref<booelan>(false)
/** Data End **/

/** Methods Start **/
/**
 * @return { void }
 * @description 获取钱包数据
 */
const initWalletData = async (): Promise<void> => {
    try {
        const res = await apiUserWallet()
        availableMoney.value = res.balance
    } catch (err) {
        //TODO handle the exception
        console.log('获取钱包数据报错=>', err)
    }
}
/**
 * @return { void }
 * @description 处理金额
 */
const handleCheckMoney = async (e: Event) => {
    let val = e.target.value.replace(/(^\s*)|(\s*$)/g, '')
    if (!val) {
        money.value = ''
        return
    }
    const reg = /[^\d.]/g
    // 只能是数字和小数点，不能是其他输入
    val = val.replace(reg, '')
    // // 保证第一位只能是数字，不能是点
    val = val.replace(/^\./g, '')
    // // 小数只能出现1位
    val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
    // // 小数点后面保留2位
    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
    await nextTick()
    money.value = val
}
/**
 * @param { money } 充值金额
 * @return { void }
 * @description 点击充值
 */
const handleCharge = async (id: string | number = ''): Promise<void> => {
    const client = getClient()
    try {
        if (id != '') money.value = ''
        if (money.value == '') {
            uni.$u.toast('请输入充值金额！')
            return
        }
        const orderData = await apiChargeMoney({
            orderAmount: money.value,
            terminal: client
        })
        orderData.type = PayEnum.RECHARGE
        orderData.totalAmount = orderData.orderAmount
        goPage(`/pages/order_buy/index?orderData=${JSON.stringify(orderData)}`)
    } catch (e) {
        //TODO handle the exception
        console.log('充值报错=>', err)
    }
}
/**
 * @param { url } 跳转链接
 * @return { void }
 * @description 跳转页面
 */
const goPage = (url: string) => {
    uni.navigateTo({
        url: url
    })
}
/** Methods End **/

/** Life Cycle Start **/
onShow(() => {
    initWalletData()
})
/** Life Cycle End **/
</script>

<style lang="scss">
.charge {
    padding: 30rpx;

    // 充值内容
    .charge-content {
        width: 100%;
        height: 320rpx;
        padding: 40rpx;
        border-radius: 20rpx;
        background-color: #ffffff;

        .input {
            padding: 24rpx 0;
            font-size: 46rpx;
            border-bottom: 1rpx solid #e5e5e5;

            input {
                padding-left: 10rpx;
                font-size: 66rpx;
                height: 80rpx;
            }
        }
    }

    // 充值按钮
    .charge-btn {
        padding: 40rpx 0 60rpx 0;
    }

    // 推荐充值
    .recommend-item {
        width: 214rpx;
        height: 160rpx;
        padding: 30rpx;
        float: left;
        text-align: center;
        border-radius: 20rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
        background-color: #ffffff;
    }

    .recommend-item:nth-child(3n-2) {
        margin-right: 0;
    }

    // 充值记录
    .record {
        width: 100%;
        left: 0;
        bottom: 80rpx;
        box-sizing: border-box;
        position: absolute;
    }

    .pay-popup {
        .content {
            padding: 40rpx 20rpx;
            padding-bottom: 0;
            text-align: center;
            width: 560rpx;
            border-radius: 20rpx;
        }

        .img-icon {
            width: 168rpx;
            height: 118rpx;
            display: inline-block;
        }
    }
}
</style>
